<template>
  <div :class='prefixCls'>
    <a-tabs v-model='currentTab' @change='handleTabChange'>
      <a-tab-pane v-for='v in icons' :key='v.key'>
        <span slot='tab' :style="{ fontSize: '10px' }">
          {{ v.title }}
        </span>
        <ul v-if="v.key != 'custom'">
          <li v-for='(icon, key) in v.icons' :key='`${v.key}-${key}`' :class="{ 'active': selectedIcon==icon }"
              @click='handleSelectedIcon(icon)'>
            <a-icon :type='icon' :style="{ fontSize: '24px' }" />
          </li>
        </ul>
        <ul v-if="v.key == 'custom'">
          <li v-for='(icon, key) in v.icons' :key='`${v.key}-${key}`' :class="{ 'active': selectedIcon==icon }"
              @click='handleSelectedIcon(icon)'>
            <a-icon :component="allIcon[icon + 'Icon']" :style="{ fontSize: '24px' }" />
          </li>
        </ul>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import icons from './icons'

export default {
  name: 'IconSelect',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-icon-selector'
    },
    // eslint-disable-next-line
    value: {
      type: String
    },
    svgIcons: {
      type: Array,
      required: true
    },
    allIcon: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedIcon: this.value || '',
      currentTab: 'custom',
      icons: icons
    }
  },
  watch: {
    value(val) {
      this.selectedIcon = val
      this.autoSwitchTab()
    }
  },
  created() {
    if (this.value) {
      this.autoSwitchTab()
    }
    const custom = [{
      key: 'custom',
      title: '自定义图标',
      icons: this.svgIcons
    }]
    this.icons = custom.concat(this.icons)
  },
  methods: {
    handleSelectedIcon(icon) {
      this.selectedIcon = icon
      this.$emit('change', icon)
    },
    handleTabChange(activeKey) {
      this.currentTab = activeKey
    },
    autoSwitchTab() {
      const icons = this.icons
      icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
    }
  }
}
</script>

<style lang='less' scoped>
@import "../index.less";

ul {
  list-style: none;
  padding: 0;
  overflow-y: scroll;
  height: 250px;

  li {
    display: inline-block;
    padding: @padding-sm;
    margin: 3px 0;
    border-radius: @border-radius-base;

    &:hover, &.active {
      // box-shadow: 0px 0px 5px 2px @primary-color;
      cursor: pointer;
      color: @white;
      background-color: @primary-color;
    }
  }
}
</style>
